<template>
	<view class="fun-flex-col page fun-justify-between">
		<view class="fun-flex-col section">
			<image class="login-text" src="@/static/login/login_text.png" />

			<view class="fun-flex-col  group_3">
				<view class="fun-flex-col section_2">
					<text class="fun-self-start text_2">Sign In</text>
					<text class="fun-self-start font text_3">Username</text>
					<view class="fun-flex-col text-wrapper">
						<input class="font_2 text_4" v-model="form.username" maxlength="12" placeholder="Enter your username" type='text'/>
					</view>
					
					<text class="fun-self-start font text_5">Password</text>
					<view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch section_4">
						<input class="font_3 text_6" v-model="form.password" maxlength="20" placeholder="Enter your password" type='text':password='!isShowWord'/>
						<image class="image_eye" v-if='isShowWord' src="@/static/login/eye.png" @click="isShowWord = false"/>
						<image class="image_10" v-if='!isShowWord' src="@/static/login/eye_off.png" @click="isShowWord = true" />
					</view>
					
					<text class="fun-self-start font text_7">Verification Code</text>
					<view class="fun-flex-row fun-justify-between fun-items-end text-wrapper_2">
						<input class="font_3" v-model="form.captcha" placeholder="Enter the verification code" type="text"/>
						<image class="image_11" :src="captchaImg" @click="getCaptcha"/>
					</view>
						
					<view class="fun-flex-row fun-items-center group_5">
						<checkbox-group @change="changeBox">
							<label class="fun-flex-row fun-items-center">
								<checkbox value="remember" :checked='!!checkVal' borderColor="#000000" activeBackgroundColor="#1A7B99" activeBorderColor="#fff" color="#fff" style="transform:scale(0.75)" />
								<text class="text_8">Remember me</text>
							</label>
						</checkbox-group>
					</view>
					
					<view class="text-wrapper_3" @click="signIn">Sign in</view>
					<text class="fun-self-center font_2 text_10" @click="signUp">Sign up</text>
				</view>
			</view>
		</view>
		
		<text class="fun-self-center font_2" @click="retrieve">Forgot password</text>
	</view>
</template>

<script>
	import md5 from '@/js_sdk/js-md5/src/md5.js';
	import {login,getCaptcha,userInfo} from "@/api/common.js"
	export default {
		data() {
			return {
				checkVal:"",
				isShowWord:false,
				form:{
					client:"web",
					username:"",
					password:"",
					captcha_id:"",
					captcha:""
				},
				captchaImg:""
			};
		},
		onLoad() {
			this.getCaptcha();
			this.checkVal = uni.getStorageSync("remember");
			if(this.checkVal){
				this.form.username = uni.getStorageSync("username");
				this.form.password = uni.getStorageSync("password");
			}
		},
		methods: {
			getCaptcha(){
				getCaptcha().then(res => {
					if(res.code == 0){
						this.captchaImg = this.COFIG?.staticUrl + res.data?.img;
						this.form.captcha_id = res.data?.cptid;
					}
					else{
						this.form.captcha = "";
						this.form.captcha_id = "";
						this.UTILS.logStr(res.msg || "获取验证码失败")
					}
				})
			},
			signIn(){
				const {username,password,captcha} = this.form;
				if(!username){
					this.UTILS.logStr("Enter your username");
					return
				}
				if(username.length < 6){
					this.UTILS.logStr("The username must be 6-12 characters long");
					return 
				}
				if(!password){
					this.UTILS.logStr("Enter your password");
					return
				}
				if(password.length < 6){
					this.UTILS.logStr("The password must be 6-12 characters long");
					return
				}
				if(!captcha){
					this.UTILS.logStr("Enter the verification code");
					return
				}
				if(this.checkVal){
					uni.setStorageSync("remember",this.checkVal);
					uni.setStorageSync("username",this.form?.username);
					uni.setStorageSync("password",this.form?.password);
				}
				else{
					uni.removeStorageSync("remember");
					uni.removeStorageSync("username");
					uni.removeStorageSync("password");
				}
				this.submitLogin()
			},
			
			submitLogin(){
				const params = Object.assign({},this.form,{
					password:md5(this.form.password)
				})
				login(params).then(res => {
					if(res.code == 0){
						this.getUserInfo();
						uni.switchTab({
							url:'/pages/home/index',
							animationType: 'pop-in',
							animationDuration: 200
						})
					}
					else{
						this.getCaptcha()
						this.UTILS.logStr(res.msg || "sign up Failed")
					}
				})
			},
			
			getUserInfo(){
				userInfo().then(res => {
					if(res.code == 0){
						const data = res?.data || {};
						getApp().globalData.userInfo = data;
						uni.setStorageSync('userInfo',data);
					}
					else{
						this.UTILS.logStr(res.msg || "获取配置失败")
					}
				})
			},
			
			signUp(){
				uni.navigateTo({
					url:'/pages/login/signUp',
					animationType: 'pop-in',
					animationDuration: 200
					
				})
			},
			retrieve(){
				uni.navigateTo({url:'/pages/login/userName'})
			},
			changeBox(ev){
				this.checkVal = ev.detail.value[0];
				console.log(this.checkVal,"this.checkValthis.checkVal")
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		height: 100%;
		padding-bottom: 52rpx;
		.section {
			background-image: url('../../static/login/login_bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding-top: 80rpx;
			.group {
				padding-left: 68rpx;
				padding-right: 28rpx;

				.text {
					color: #000000;
					font-size: 30rpx;
					font-family: SF Pro Text;
					font-weight: 600;
				}

				.image {
					width: 34rpx;
					height: 22rpx;
				}

				.image_2 {
					width: 30rpx;
					height: 22rpx;
				}

				.image_3 {
					width: 48rpx;
					height: 22.66rpx;
				}
			}

			
			.login-text{
				margin: 0 auto;
				width: 374rpx;
				height: 68rpx;
			}
			.group_3 {
				margin-top: 60rpx;
				padding: 0 32rpx;

				.section_3 {
					background-image: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);
					height: 736rpx;
				}

				.section_2 {
					padding: 40rpx 32rpx 48rpx;
					background-color: #ffffff;
					border-radius: 16rpx;
					box-shadow: 0rpx 4rpx 27.6rpx #00000026;

					.text_2 {
						color: #000000;
						font-size: 40rpx;
						font-family: SF Pro Display;
					}

					.font {
						font-size: 32rpx;
						font-family: SF Pro Display;
						letter-spacing: -0.32rpx;
						color: #3e3e3e;
					}

					.text_3 {
						margin-top: 24rpx;
					}

					.text-wrapper {
						margin-top: 16rpx;
						padding: 20rpx 0;
						background-color: #ffffff;
						border-bottom: solid 2rpx #1a7b99;

						.text_4 {
							color: #121212;
							width: 100%;
						}
					}

					.text_5 {
						margin-top: 24rpx;
					}

					.section_4 {
						margin-top: 16rpx;
						padding: 20rpx 0;
						background-color: #ffffff;
						border-bottom: solid 2rpx #1a7b99;

						.text_6 {
							width: 100%;
						}

						.image_10 {
							width: 40rpx;
							height: 40rpx;
						}
						.image_eye {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.text_7 {
						margin-top: 24rpx;
					}

					.text-wrapper_2 {
						margin-top: 16rpx;
						background-color: #ffffff;
						border-bottom: solid 2rpx #1a7b99;
						input{
							flex:1;
							padding: 20rpx 24rpx 20rpx 0;
						}
						.image_11 {
							background: rgba(26, 123, 153, 0.2);
							width: 200rpx;
							height: 80rpx;
						}
					}
					.font_3 {
						width: 100%;
						font-size: 32rpx;
						font-family: Poppins;
						letter-spacing: -0.32rpx;
						color: #121212;
					}

					.group_5 {
						margin: 32rpx 0;
						.section_5 {
							background-color: #ffffff;
							border-radius: 4rpx;
							width: 32rpx;
							height: 32rpx;
							border: solid 2rpx #000000;
						}

						.text_8 {
							color: #3e3e3e;
							font-size: 28rpx;
							font-family: SF Pro Display;
						}
					}

					.text-wrapper_3 {
						padding: 24rpx 0;
						background-color: #1a7b99;
						border-radius: 8rpx;
						color: #ffffff;
						font-size: 28rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						text-align: center;
					}

					.text_10 {
						margin-top: 32rpx;
					}
				}
			}
		}

		.font_2 {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #1a7b99;
		}
	}
</style>